<template>
	<view>
		<!-- <map style="width: 100%; height: calc(30vh);" :latitude="latitude" :longitude="longitude" :markers="covers"
			:id="id">
		</map> -->
		<!-- 物流信息 -->
		<view class="tracking">
			<view class="header flex flex_bet flex_ali" v-if="list">
				<view class="left flex flex_ali">
					<view class="img">
						<image :src="list.result.logo"></image>
					</view>
					<view>{{list.result.expName}}</view>
				</view>
				<view class="right">
					寄回单号 {{list.result.number}} <text class="iconfont icon-fuzhi" @click="copy(list.result.number)"></text>
				</view>
			</view>
			<u-empty :show="State == 0" mode="data" text="没有物流信息" icon="http://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
			<u-steps current="0" direction="column" dot>
				<u-steps-item v-for="(item, index) in list.Traces" :key="index" :title="item.status"
					:desc="item.time">
					<text class="slot-icon" slot="icon">
						<text class="iconfont icon-express-package-full" v-if="index == 0"></text>
						<text class="iconfont icon-kuaidi" v-else-if="index == 1"></text>
						<text class="iconfont icon-kuaidiyuan" v-else-if="list.Traces.length - index == 1 "></text>
						<text class="dot" v-else></text>
					</text>
					<text slot="condition" v-if="index === 0" style="font-size: 16px;">{{condition}}</text>
				</u-steps-item>
			</u-steps>
		</view>
		<!-- <tracking :expressageId="num" :sfPhone="phone"></tracking> -->
	</view>
</template>

<script>
import {
		expressCheck
	} from '@/utils/index.js'
	export default {
		computed: {
			condition() {
				//0：暂无轨迹，1:快递收件，2：在途中,3：签收,4：问题件 5.疑难件 6.退件签收
				if (this.State) {
					return this.State == 0 ? '暂无轨迹' : this.State == 1 ? '快递收件' : this.State == 2 ? '在途中' :
						this.State == 3 ? '已签收' :
						this.State == 4 ? '问题件' :
						this.State == 5 ? '疑难件' : this.State == 6 ? '退件签收' : ''
				}
			}
		},
		watch: {
			expressageId(val) {
				// console.log('123',val);
				if(val=='') return
				//获取寄回手机后四位
				let fourFigure = this.sfPhone.substring(this.sfPhone.length - 4)
				let zz = /^[A-Za-z0-9-]{4,35}$/
				console.log('快递单号监听', val, fourFigure)
				//顺风快递单号
				if (zz.test(val)) {
					this.getexpressCheck(`${val}:${fourFigure}`)
				} else {
					this.getexpressCheck(val)
				}
			}
		},
		data() {
			return {
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 22.726016550781,
				longitude: 114.25445487896,
				covers: [],
				// num:'SF1154463787339',
				sfPhone:'',
				list: [],
				State: '',
				expressageId:''
			};
		},
		onLoad(option) {
			this.covers.push({
				latitude:22.726016550781,
				longitude:114.25445487896,
				iconPath: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/dw.png',
				id: 1,
				width: 25,
				height: 30
			})
			this.expressageId = option.expressageId
			this.sfPhone = option.phone
		},
		methods:{
			//获取快递信息
			getexpressCheck(val) {
				console.log(val,'查询值');
				expressCheck(val).then(res => {
					console.log('获取快递信息', res)
					this.list = res
					this.list.Traces = res.result.list ,
					this.State = res.result.deliverystatus
				}).catch(err => {
					console.log('失败快递信息', err)
				})
			},
			//复制订单号
			copy(item) {
				let that = this
				if (!item) return that.$u.toast('暂无订单号信息');
				uni.setClipboardData({
					data: item,
					success(res) {
						that.$u.toast('复制成功')
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f1f2f4;
	}
.tracking {
		background-color: #fff;
		padding: 20rpx;
		.header {
			color: #727274;
			margin: 20rpx 0 30rpx;
			.left{
				font-size: 22rpx;
				color: #000;
				line-height: 40rpx;
				.img{
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					background-color: #fff;
					overflow: hidden;
					margin-right: 10rpx;
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
			.right{
				font-size: 28rpx;
			}
			// .tracking /deep/.u-steps-item{
			// 	margin-bottom: 15rpx;
			// }
		}
		.slot-icon {
			.iconfont{
				font-size: 45rpx;
				color: #707070;
			}
			.dot{
				display: block;
				width: 5px;
				height: 5px;
				border-radius: 50%;
				background-color: #cacccd;
			}
			}
	}
</style>
